<template>
  <div id="customerUpdate">
    <ul>
      <li>
        <el-input v-model="name" placeholder="客户姓名"></el-input>
      </li>
      <li>
        <el-input v-model="age" placeholder="客户年龄"></el-input>
      </li>
      <li>
        <el-input v-model="tel" placeholder="手机号码"></el-input>
      </li>
      <li>
        <el-select v-model="salesman" placeholder="销售员">
          <el-option
            v-for="item in salesmans"
            :key="item._id"
            :label="item.name"
            :value="item._id"
          >
          </el-option>
        </el-select>
      </li>
      <li>
        <el-radio v-model="gender" label="男">男</el-radio>
        <el-radio v-model="gender" label="女">女</el-radio>
      </li>
      <li>
        <el-button @click.prevent="cusUpdate">修改</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import apis from "../../http/apis";
import customers from "../../http/modules/customers";

import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
  "salesmans"
);

export default {
  async created() {
    //   console.log(2222222222,this.$route.query._id);
    const { data } = await apis.customers.getCustomerById({
      _id: this.$route.query._id,
    });
    const customer = data[0];
    this._id = customer._id;
    this.name = customer.name;
    this.age = customer.age;
    this.gender = customer.gender;
    this.tel = customer.tel;
    const salesmans = await this.getSalesmansData();
    this.salesmans = salesmans;
    this.salesman = customer.salesman._id;
    this.customer = customer;
  },
  data() {
    return {
      customer: "",
      _id: "",
      name: "",
      age: "",
      gender: "",
      salesman: "",
      oldsalesman: "",
      tel: "",
      salesmans: [
        {
          _id: "5fec664a22550000fb006a15",
          name: "池鹭",
        },
        {
          _id: "5fec664a22550000fb006a14",
          name: "针尾鸭",
        },
        {
          _id: "5fec664a22550000fb006a13",
          name: "虎鲸",
        },
      ],
    };
  },
  methods: {
    ...mapActions(["getSalesmansData", "modifySalesmansById","receiveSalesmanById"]),
    async cusUpdate() {

      //如果更改了客户的销售员，将客户从原销售员中删除
      if (this.salesman != this.customer.salesman._id) {
        //在对应的销售中删除此客户
        const salesman = this.customer.salesman;
        const index = salesman.customerId.indexOf(this.customer._id);
        salesman.customerId.splice(index, 1);
        this.modifySalesmansById(salesman);
      }

      //客户新数据
      const customer = {
        _id: this._id,
        name: this.name,
        age: this.age,
        gender: this.gender,
        salesman: this.salesman,
        tel: this.tel,
      };

      //获取销售员信息
      const salesman = (await this.receiveSalesmanById({_id:this.salesman}))[0];
    
      //客户的id存入新选择的销售员中
      salesman.customerId.push(this.customer._id);
      
      //保存修改后的销售员
      this.modifySalesmansById(salesman);

      //发送请求，保存客户新数据
      apis.customers.updateCustomer(customer);
      alert("修改成功");
    },
  },
};
</script>

<style>
#customerUpdate {
  width: 300px;
  text-align: left;
}

#customerUpdate ul li {
  margin-bottom: 15px;
}

#customerUpdate ul li .el-select {
  width: 300px;
}
</style>






